@use './mixin.scss' as mixin;
@use './functions.scss' as tools;
@use './variables.scss' as var with (
  $namespace: 'demo',
  // 可以修改
  $theme-colors: (
      primary: #409eff,
      info: #909399,
      success: #67c23a,
      warning: #e6a23c,
      danger: #f56c6c,
    ),
  $theme-mode-list: (
    (
      mode: 'dark',
      bg-color: #000000,
      bg-mix-color: #ffffff,
      text-color: #ffffff,
      text-mix-color: #000000
    ),
  )
);
// step 1 合并默认主题配置
$theme-mode-list: tools.merge-default-theme(var.$theme-mode-list, var.$theme-default-mode);
// @debug Step 1：合并后的主题配置： $theme-mode-list;
// step 2 获取有哪些主题模式
$theme-mode-keys: tools.theme-get-all-mode($theme-mode-list);
// @debug Step 2：主题配置： $theme-mode-keys;

// step 3 生成主题模式
@each $mode in $theme-mode-keys {
  @include mixin.generate-css-var-root($mode) {
    $config: tools.theme-get-config($theme-mode-list, $mode);
    // step 4 生成背景颜色相关
    @include mixin.bg-color-generate-mixin($config, $mode, var.$namespace);
    // step 5 生成文本颜色相关
    @include mixin.text-color-generate-mixin($config, $mode, var.$namespace);
    // step 6 生成主题颜色相关
    @include mixin.theme-color-generate-mixin(var.$theme-colors, $config, $mode, var.$namespace);
  }
}
